<template>
  <div class="box">
    <div v-if="dataList.length == 0" class="shoppingTip">
      <van-empty description="空空如也">
        <van-button round type="danger" class="bottom-button"
          ><h1>去购物</h1></van-button
        >
      </van-empty>
    </div>

    <div>
      <div class="goodsBox clear" v-for="val in this.$store.state.shoppingList" :key="val.id">
        <div class="checkedBox">
          <input
            type="checkbox"
            name=""
            id="inp"
            v-model="checkedList"
            :value="val"
          />
        </div>

        <span class="tipBox">
          <van-card
            :num="val.num"
            :price="val.price"
            desc="6+128GB"
            :title="val.name"
            :thumb="val.picture"
          >
            <template #tags>
              <van-tag plain type="danger">标签</van-tag>
              <van-tag plain type="danger">标签</van-tag>
            </template>
            <template #footer>
              <van-button size="mini" @click="numChanged(true, val)"
                >+</van-button
              >
              <van-button size="mini" @click="numChanged(false, val)"
                >-</van-button
              >
            </template>
          </van-card>
        </span>
      </div>
    </div>
    <p>{{ sum() }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      checkedList: [],
      dataList: []
    }
  },
  watch: {
    checkedList () {
      this.$bus.$emit('check1', this.checkedList.length, this.dataList.length)
    }
  },
  mounted () {
    const state = localStorage.getItem('token')
    if (!state) {
      this.dataList = []
      return
    }
    //获取当前用户购物车
    const username = localStorage.getItem('userData')
    this.request.get('/shopping/car', { username }).then((data) => {
      this.dataList = data.data
      this.$store.state.shoppingList = data.data
      //console.log(this.$store.state.shoppingList, 3333)
      //console.log(data, 22222)
    })
    this.$bus.$on('checked', (checked) => {
      if (checked) {
        this.checkedList = this.dataList
      } else {
        this.checkedList = []
      }
    })


    //删除购物车商品
    this.$bus.$on('delect_shopping', (data) => {
      //获取选中商品信息
      const list = this.checkedList

      new Promise((resolve, reject) => {
        const id = []
        for (let i = 0; i < list.length; i++) {
          console.log(list[i].id)
          //获取选中商品id
          id.push(list[i].id)
        }
        resolve(id)
      }).then((data) => {
        const id = data
        this.request.get('/api/delect_shoppingCar', { id }).then((data) => {
          if (data.status == 200) {
            window.location.reload()
          }
        })
      })
    })
  },
  methods: {
    numChanged (e, val) {
      if (e) {
        val.num++
      } else {
        if (val.num > 0) {
          val.num--
        }
      }
    },
    sum () {
      let sum = 0
      this.checkedList.forEach((item) => {
        sum += item.num * item.price
      })
      this.$store.state.shoppingPrice = sum * 100
      // return sum
    }
  }
}
</script>

<style>
.van-button--mini {
  width: 30px;
  height: 30px;
}
.van-button__text {
  font-size: 1rem;
}
.van-card__num {
  font-size: 1rem;
  margin-bottom: 10px;
}
.van-card__title {
  color: black;
  font-size: 16px;
  font-weight: 700;
  margin-top: 10px;
}
</style>

<style scoped>
.box {
  width: 100%;
  background-color: #fcfcfc;
  margin-top: 3rem;
}
.shoppingTip {
  background-color: white;
}
.bottom-button {
  width: 160px;
  height: 40px;
}
.van-button__text h1 {
  color: aliceblue;
  font-size: 17px;
}
.goodsBox {
  width: 23.4375rem;
  height: 8.5rem;
}
.goodsBox:last-child {
  height: 18.5rem;
}
.goodsBox .checkedBox {
  width: 10%;
  line-height: 8rem;
  text-align: center;
  float: left;
}
.checkedBox #inp {
  width: 1rem;
  height: 1rem;
}
.goodsBox .tipBox {
  width: 90%;
  height: 100px;
  float: left;
}
</style>
